<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>我的空间-登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="/asset/images/myspace/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/asset/layui/css/layui.css" media="all">
    <script src="/asset/js/jquery.min.js" type="text/javascript"></script>
    <script src="/asset/layui/layui.js" charset="utf-8"></script>
    <script src="/asset/js/vue.min.js" type="text/javascript"></script>

    <!-- 花花背景 -->
<!--    <script src="/asset/spaceLoginBg/snowfall.jquery.js" charset="utf-8"></script>-->

    <style>
        html{ height:100%;width:100%;}
        body { background-color: #fff4fd; height:100%;width:100%; overflow: hidden;}
        #spaceLoginVue{height:100%;width:100%;}
        input:-webkit-autofill {-webkit-box-shadow:inset 0 0 0 1000px #fff;background-color:transparent;}
        .admin-login-background {width:300px;height:300px;position:fixed;left:50%;top:40%;margin-left:-150px;margin-top:-100px;}
        .admin-header {text-align:center;margin-bottom:20px;color: #a78369;font-weight:bold;font-size:30px}
        .admin-input {border-top-style:none;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;height:50px;width:300px;padding-bottom:0px;}
        .admin-input::-webkit-input-placeholder {color:#a78369}
        .layui-icon-username {color:#a78369 !important;}
        .layui-icon-username:hover {color:#9dadce !important;}
        .layui-icon-password {color:#a78369 !important;}
        .layui-icon-password:hover {color:#9dadce !important;}
        .admin-input-username {border-top-style:solid;border-radius:10px 10px 0 0;}
        .admin-button {margin-top:20px;font-weight:bold;font-size:18px;width:300px;height:50px;border-radius:5px;background-color:#a78369;border:1px solid #d8b29f}
        .admin-icon {margin-left:260px;margin-top:10px;font-size:30px;}
        i {position:absolute;}
        .backBlog{ margin-left:10px; color: #cbb9a4; font-weight: bolder;}
        .spaceOpen{ text-align: right; float: right; max-width: 80px; margin-right: 10px; border: none; background-color: transparent; color: #cbb9a4;
            font-weight: bolder; font-size: 12px; line-height: 23px;}
        /* 页脚样式 */
        footer { text-align: center; color: #666; bottom: 30px; position: relative;}
        footer a:hover { color: #1f7994; text-decoration: underline; }
        footer p img{ width: 20px;}
    </style>
</head>
<body>
<div id="spaceLoginVue">
    <div style="width: 100%; height: 100%;">
        <div class="admin-login-background">
            <div class="admin-header">
                <span>空间登录</span>
            </div>
            <div>
                <a href="/" class="backBlog">返回博客</a>
                <input class="spaceOpen" th:value="${spaceOpen}" readonly>
            </div>
            <form class="layui-form" action="">
                <div>
                    <i class="layui-icon layui-icon-username admin-icon"></i>
                    <input type="text" name="account" placeholder="请输入用户名" autocomplete="on" autofocus class="layui-input admin-input admin-input-username">
                </div>
                <div>
                    <i class="layui-icon layui-icon-password admin-icon"></i>
                    <input type="password" name="password" id="password" placeholder="请输入密码" autocomplete="off" class="layui-input admin-input">
                </div>
                <button class="layui-btn admin-button" lay-submit="" lay-filter="login">登 陆</button>
            </form>
        </div>
    </div>
    <footer>
        <p v-html="indexFooter.content"></p>
    </footer>
</div>
</body>
<script>
    layui.use(['form', 'layer'], function () {
        var $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //初始化背景
        // $(function () {
        //     $(document).snowfall('clear');
        //     $(document).snowfall({
        //         image: "/asset/spaceLoginBg/huaban.png",
        //         flakeCount:10,
        //         minSize: 5,
        //         maxSize: 22
        //     });
        // });

        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.userName == '') {
                layer.msg('用户名不能为空', {icon: 5});
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空', {icon: 5});
                return false;
            }
            if (data.captcha == '') {
                layer.msg('验证码不能为空', {icon: 5});
                return false;
            }

            var index = layer.load(2);
            var url = "/blogSpaceLogin/loginVerify";
            $.post(url, data, function(res){
                layer.close(index);
                if(res.state == "200"){ //登录成功
                    layer.msg(res.message, {icon: 6}, function () {
                        location.href = '/blogSpace';
                    });
                }else{
                    layer.msg(res.message, {icon: 5});
                    $("#password").val(""); //清空密码
                }
            });
            return false;
        });
    });

    var spaceLoginVue = new Vue({
        el: '#spaceLoginVue',
        data: function () {
            return {
                serverUrl: 'http://blog-my.com', //服务器地址（临时开发用）
                indexFooter: [], //页脚
            }
        },
        created: function () {
            const me = this;
            me.$nextTick(function () {
                me.getIndexData();
            });
        },
        methods: {
            //初始化基本信息
            getIndexData: function(){
                const me = this;
                $.ajax({
                    type: 'POST',
                    url: '/index/getFooterData',
                    // async:false, //同步
                    data: {},
                    dataType: 'JSON',
                    success: function(data){
                        if(data.state == "200"){
                            me.indexFooter = data.indexFooter;
                        }else{
                            layui.layer.msg(data.message, {icon:2});
                        }
                    },
                    error: function(error){
                        layui.layer.msg(error, {icon:2});
                    }
                })
            },
        }
    });
</script>
</html>